<template>
	<view class="contacts-addPeopleGroups">
		<uni-nav-bar color="#999" :fixed="true" background-color="#ffffff" status-bar left-icon="left"
			@clickLeft="back">
			<view class="segmented-box">
				<uni-segmented-control :current="current" :values="items" @clickItem="setActiveIndex" styleType="button"
					activeColor="#5fc08e" style="width:120px;"></uni-segmented-control>
			</view>
		</uni-nav-bar>
		<view class="content">
			<uni-search-bar :placeholder="activeIndex?$w('搜索群名称/群号'):$w('搜索用户名/用户昵称')" :radius="100" class="search-bar"
				bgColor="#eeeeee" v-model="keyword" @confirm="doSearch" @focus="searchFocus = true"
				@blur="searchFocus = false" @cancel="doClear" @clear="doClear"></uni-search-bar>

			<view v-if="activeIndex === 0">
				<!-- 搜索 -->
				<view v-if="usersList.length">
					<uni-im-info-card v-for="(item,index) in usersList" :key="index" :title="item.nickname"
						:avatarCircle="true"
						:avatar="item.avatar_file&&item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
						<view class="chat-custom-right-box">
							<text v-if="item.isFriend" class="chat-custom-right grey">{{$w('已添加')}}</text>
							<text v-else @click="addUser(item,index)" class="chat-custom-right">{{$w('加为好友')}}</text>
						</view>

					</uni-im-info-card>
					<!--
          					v-if="keyword.length" 
          					<template v-else>
          						<uni-list-item v-for="(tab,index) in tabs" :key="index"
          							class="tab-item" :title="tab.title" 
          							:to="tab.url" showArrow :border="false"
          						></uni-list-item>
          					</template> -->
				</view>
				<uni-im-load-state v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-im-load-state>
			</view>
			<view v-if="activeIndex === 1">
				<view v-if="groupList.length">
					<uni-im-info-card v-for="(item,index) in groupList" :key="index" :title="item.name"
						:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
						<view class="chat-custom-right-box">
							<text v-if="item.isExist" class="chat-custom-right grey">{{$w('已加入')}}</text>
							<text v-else @click="addUser(index)" class="chat-custom-right">{{$w('申请加入')}}</text>
						</view>

					</uni-im-info-card>
				</view>
				<uni-im-load-state v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-im-load-state>
			</view>
		</view>
		<view class="">
			<button type="default" @click="test">test</button>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" :title="activeIndex?$w('申请加群'):$w('申请添加好友')" :placeholder="$w('请输入验证信息')"
				:confirmText="$w('发送')" :message="$w('成功消息')" :duration="2000" :before-close="true" :value="value"
				@close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	const db = uniCloud.database();
	import i18nMixin from '../i18n/i18n-mixin.js'
	export default {
		mixins: [i18nMixin],
		data() {
			return {
				current: 0,
				loading: true,
				hasMore: false,
				activeIndex: 0,
				value: '',
				searchFocus: false, //是否展示搜索列表
				keyword: '',
				usersData: [],
				checkIndex: '', //申请加的群index
				groupData: []
			}
		},
		computed: {
			// __WJF
			items() {
				return [this.$w('找人'), this.$w('找群')]
			},
			tabs() {
				return [{
						'title': this.$w('添加手机联系人'),
						'url': ''
					},
					{
						'title': this.$w('扫一扫加好友'),
						'url': ''
					},
					{
						'title': this.$w('查找陌生人'),
						'url': ''
					}
				]
			},
			usersList() {
				let current_uid = uniCloud.getCurrentUserInfo().uid
				let friendList = uniIm.friend.dataList
				return this.usersData.map(item => {
					const isFriend = friendList.find(i => i._id == item._id)
					return {
						...item,
						isFriend
					}
				})
				// 过滤掉自身 __WJF
				.filter(user=>user._id !==current_uid)
			},
			groupList() {
				let groupList = uniIm.group.dataList
				console.log('已经加入的groupList', groupList);
				console.log('查到的groupList', this.groupData);
				// return this.groupData.filter(item=> groupList.find(i=>i._id == item._id))

				return this.groupData.map(item => {
					const isExist = groupList.find(i => i._id == item._id)
					return {
						...item,
						isExist
					}
				})
			}
		},
		onLoad(param) {
			this.setParam(param)
		},
		methods: {
			test(){
				console.log(this.usersList);
			},
			setParam(param) {
				console.log("param: ", param);
				if (param.group_id) {
					this.current = 1
					this.setActiveIndex({
						currentIndex: 1
					})
					this.keyword = param.group_id
					return this.doSearch()
				}
				this.getUserList()
				this.getGroupsList()
			},
			async getGroupsList() {
				const limit = 1000
				const skip = this.groupData.length / limit + 1
				const res = await db.collection('uni-im-group')
					.where(`"user_id" != "${uniCloud.getCurrentUserInfo().uid}"`)
					.field('_id,name,avatar_file')
					.orderBy('create_date', 'desc')
					.limit(limit)
					.skip(skip)
					.get()
				// console.log("uni-im-group: ",res);
				if (res.result.data.length) {
					this.loading = false
					this.hasMore = true
					this.groupData = res.result.data
				}
			},
			async getUserList() {
				try {
					let res = await db.collection('uni-id-users')
						.field('_id,nickname,avatar_file,lang')
						.get()
					let data = res.result.data
					// console.log("data: ",data);
					if (data.length) {
						this.loading = false
						this.hasMore = true
						this.usersData = data
					}
				} catch (e) {
					console.log(e);
				}
			},
			back() {
				uni.navigateBack()
			},
			async doSearch(e) {
				console.log("doSearch: ", e, this.keyword);
				uni.showLoading({
					title: this.$w('搜索中')
				})
				if (this.activeIndex) {
					let res = await db.collection('uni-im-group')
						.where(`
              /${this.keyword}/.test(name) || 
							"_id" == "${this.keyword}"
						`)
						.get()
					console.log(res);
					this.groupData = res.result.data
				} else {
					const whereString = [
						"_id",
						"username",
						"nickname",
						"email",
						"mobile"
					].map(item => `"${item}" == "${this.keyword}"`).join(' || ')
					// console.log('whereString',whereString);
					let res = await db.collection('uni-id-users')
						.where(whereString)
						.field('_id,nickname,avatar_file,lang')
						.get()
					// tip：用户表数据少，或者已做好优化，可以使用：/${this.keyword}/.test(nickname) 模糊匹配用户昵称
					console.log(res);
					this.usersData = res.result.data
				}
				uni.hideLoading()
			},
			doClear() {
				if (this.keyword) {
					this.keyword = ''
					this.usersData = []
					this.groupData = []
					this.getUserList()
					this.getGroupsList()
				}
			},
			setActiveIndex(e) {
				// console.log("activeIndex: ",e);
				if (this.activeIndex != e.currentIndex) {
					this.activeIndex = e.currentIndex;
				}
			},
			addUser(item,index) {
				
			console.log(item);
				this.checkIndex = index
				this.$refs.popup.open()
			},
			async confirm(value) {
				// if(!value){
				// 	uni.showToast({
				// 		title: '验证信息不能为空！',
				// 		icon:'none'
				// 	});
				// 	return
				// }
				// console.log('提供的验证信息',value);
				this.value = value
				this.$refs.popup.close()
				if (this.activeIndex === 0) {
					//添加好友
					const uniImCo = uniCloud.importObject("uni-im-co")
					await uniImCo.addFriendInvite({
						"to_uid": this.usersList[this.checkIndex]._id,
						// __WJF
						"friend_lang" : this.usersList[this.checkIndex].lang,
						"message": this.value
					}).then((res) => {
						console.log("res: ", res);
						uni.showToast({
							title: this.$w('已申请'),
							icon: 'none'
						});
					}).catch((err) => {
						uni.showModal({
							content: err.message || this.$w('请求服务失败'),
							showCancel: false
						})
					})

				} else {
					// console.log('1233123132123132',this.groupData,this.checkIndex);
					//申请加群
					db.collection('uni-im-group-join').add({
						"group_id": this.groupList[this.checkIndex]._id,
						"message": this.value
					}).then((res) => {
						console.log("res: ", res);
						uni.showToast({
							icon: 'none',
							title: this.$w('已申请')
						})
					}).catch((err) => {
						uni.showModal({
							content: err.message || this.$w('请求服务失败'),
							showCancel: false
						})
					})
				}
				setTimeout(() => {
					this.value = ''
				}, 100);

			},
			close() {
				// console.log('取消了');
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-im/common/baseStyle.scss";

	.contacts-addPeopleGroups {
		.segmented-box {
			flex: 1;
			justify-content: center;
			align-items: center;
		}

		.tab-item {
			border-bottom: #f5f5f5 solid 1px;
			height: 60px;
			justify-content: center;
			padding: 0 15rpx;
		}

		.background {
			background-color: #f5f5f5;
		}



		.chat-custom-right-box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70px;
			background-color: #efefef;
			border-radius: 10px;

			.chat-custom-right {

				// height: 30px;
				line-height: 1.05;
				color: #666;
				font-size: 12px;
				text-align: center;
				/* 设置文本居中，关键在这里 */

				/* #ifdef H5 */
				cursor: pointer;
				/* #endif */
				padding: 5px;
				/* 添加适当的内边距可以帮助维持布局美观 */
			}

			.grey {
				color: #bbb;
			}
		}

		.border {
			border: #ddd solid 1px;
		}

		.state-text {
			text-align: center;
			font-size: 28rpx;
		}

		/* #ifdef H5 */
		@media screen and (min-device-width:960px) {
			.content {
				margin-top: 0;
				height: calc(100vh - 175px);
				overflow: auto;
			}

			::v-deep .uni-navbar__header-btns-left,
			::v-deep .uni-navbar__placeholder,
			{
			display: none;
		}

		::v-deep .uni-navbar--fixed {
			position: relative;
			left: 0
		}
	}

	/* #endif */
	}
</style>